<template>
  <div id="app">
    <!-- 3、使用组件 -->
    <!-- 使用 scoped 用的案例组件 -->
    <BaseOne></BaseOne>
    <BaseTwo></BaseTwo>

    <!-- data - 加减按钮案例 -->
    <div>
      <BaseCount :count="count" @changeCount="handleChange2"></BaseCount>
      <BaseCount></BaseCount>
      <BaseCount></BaseCount>
    </div>
    <!-- 父组件向子组件传值 -->
    <div class="father" style="border: 3px solid #000; margin: 10px">
      我是父组件
      <!-- 1. 给当前组件标签 以添加 属性 的方式 进行 传值 -->
      <!-- [子传父]2.父组件对子组件的消息 进行监听（父组件监听事件） -->
      <BaseSon :title="myTitle" @changeTitle="handleChange"></BaseSon>
    </div>
    <!-- 个人信息组件 UserInfo-->
    <div class="user-info">
      <UserInfo
        :username="username"
        :age="age"
        :isSingle="isSingle"
        :car="car"
        :hobby="hobby"
      >
      </UserInfo>
    </div>
    <!-- 进度条 -->
    <div class="base-progress">
      <BaseProgress :w="width"></BaseProgress>
    </div>
    <!-- 事件总线 -->
    <div class="event-bus">
      <BaseA></BaseA>
      <BaseB></BaseB>
      <BaseC></BaseC>
    </div>
    <!-- provide & inject -->
    <div class="pro-j">
      我是父组件-爷爷
      <button @click="change">修改数据</button>
      <SonA></SonA>
      <SonB></SonB>
    </div>
    <!-- v-model原理：底层其实就是：value和 @input的简写 -->
    <div class="model-demo">
      <input type="text" v-model="msg1" /><br />
      <!-- 模板中获取事件的形参 → $event 获取 -->
      <input type="text" :value="msg2" @input="msg2 = $event.target.value" />
    </div>
    <!-- 组件封装：下拉菜单 -->
    <div class="base-select">
      <!-- <BaseSelect :cityId="selectId" @changeCity="selectId = $event" ></BaseSelect> -->
      <BaseSelect v-model="selectId"></BaseSelect>
    </div>
    <!-- 封装的 对话框 -->
    <div class="base-dialog">
      <button @click="openDialog">退出按钮</button>
      <BaseDialog :isShow.sync="isShow"></BaseDialog>
    </div>
    <!-- Echats ref 和 $refs 获取 DOM 元素-->
    <div class="base-chart">
      <div class="base-chart-box" style="width: 200px; height: 200px">
        这是个捣乱的盒子
      </div>
      <BaseChart></BaseChart>
    </div>
    <!-- ref 和 $refs 获取组件实例 -->
    <div class="base-form">
      <BaseForm ref="baseForm"></BaseForm>
      <button @click="handleGet">获取数据</button>
      <button @click="handleReset">重置数据</button>
    </div>
    <!-- $nextTick -->
    <div class="show-edit">
      <!-- 是否在编辑状态 -->
      <div v-if="isShowEdit">
        <input v-model="editValue" type="text" ref="inp"/>
        <button>确认</button>
      </div>
      <!-- 默认状态 -->
      <div v-else>
        <span>{{ title }}</span>
        <button @click="handleEdit">编辑</button>
      </div>
    </div>
  </div>
</template>

<script>
// 1、导入
import BaseOne from "./components/BaseOne.vue";
import BaseTwo from "./components/BaseTwo.vue";
import BaseCount from "./components/BaseCount.vue";
import BaseSon from "./components/BaseSon.vue";
import UserInfo from "./components/UserInfo.vue";
import BaseProgress from "./components/BaseProgress.vue";
import BaseA from "./components/BaseA.vue";
import BaseB from "./components/BaseB.vue";
import BaseC from "./components/BaseC.vue";
import SonA from "./components/SonA.vue";
import SonB from "./components/SonB.vue";
// 导入 封装的 下拉菜单
import BaseSelect from "./components/BaseSelect.vue";
// 导入 封装的 对话框（模态框）
import BaseDialog from "./components/BaseDialog.vue";
// echarts
import BaseChart from "./components/BaseChart.vue";
// ref 和 $refs 获取组件实例
import BaseForm from "./components/BaseForm.vue";

export default {
  provide() {
    return {
      // 简单类型 是非响应式的
      color: this.color,
      // 复杂类型 是响应式的
      userInfo: this.userInfo,
    };
  },
  data() {
    return {
      // $nextTick
      title: '大标题',
      editValue: '',
      isShowEdit: false,

      // 封装的 对话框（模态框）
      isShow: false, // 默认 隐藏
      // BaseSelect 的数据
      selectId: "103",
      // v-model 原理
      msg1: "",
      msg2: "",

      // provie & inject
      color: "pink",
      userInfo: {
        uname: "丁晓豆",
        uage: 5,
      },

      // 标题的那个案例
      myTitle: "我是丁晓豆",
      // 个人信息组件 数据
      username: "小帅",
      age: 28,
      isSingle: true,
      car: {
        brand: "宝马",
      },
      hobby: ["篮球", "足球", "羽毛球"],
      // 进度条的数据
      width: 10,
      // 单向数据流-数据
      count: 100,
    };
  },
  // name:'App',
  // 2、注册组件
  components: {
    BaseOne,
    BaseTwo,
    BaseCount,
    BaseSon,
    UserInfo,
    BaseProgress,
    // EventBus
    BaseA,
    BaseB,
    BaseC,
    // provide & inject
    SonA,
    SonB,
    // 注册 封装的下拉菜单
    BaseSelect,
    BaseDialog,
    BaseChart,
    BaseForm,
  },
  methods: {
    // [子传父]3. 提供处理函数，提供逻辑（形参中获取参数）
    handleChange(newTitle) {
      this.myTitle = newTitle;
    },
    handleChange2(newVal) {
      // console.log(newVal)
      this.count = newVal;
    },
    // provide & inject
    change() {
      this.color = "red";
      this.userInfo.uname = "铎少";
      this.userInfo.uage = 10;
    },
    openDialog() {
      this.isShow = true;
      // console.log(document.querySelector('.base-dialog'));
    },
    // 获取数据
    handleGet() {
      console.log(this.$refs.baseForm.getValues());
    },
    // 重置数据
    handleReset() {
      this.$refs.baseForm.resetValues();
    },
    // 点击编辑 $nextTick
    handleEdit() {
      // 1. 显示输入框（异步更新dom）
      this.isShowEdit = true
      // 2.让输入框 获取焦点 （$nextTick等 dom更新完，立刻执行准备的函数体）
      // this.$refs.inp.focus()
      // console.log(this.$refs.inp);
      this.$nextTick(()=>{
        console.log(this.$refs.inp);
        this.$refs.inp.focus()
      })

      // 定时器也可以，但是不精准
      // setTimeout(()=>{
      //   this.$refs.inp.focus()
      // },1000)
    }
  },
};
</script>

<style scoped>
.pro-j {
  border: 3px solid green;
  margin: 10px;
  border-radius: 6px;
}
.model-demo {
  height: 200px;
  border: 3px solid red;
  padding: 20px;
}
.show-edit {
  padding: 50px;
  background: plum;
  border: 1px solid #000;
  width: 300px;
}
</style>